<template >
  <!-- 修改密码页面 -->
  <div class="">
    <button @click="popBox()" class="click_btn">修改密码</button>
    <div id="popLayer"></div>

    <div class="Pop_up_box" id="popBox">
      <div class="pop_left">
        <div class="theme">修改密码</div>
        <div class="box_contents">
          <div style="margin-left: 42px">
            原始密码
            <input type="password" class="myin" id="oldpsd" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" maxlength="12"/>
          </div>
          <div style="margin-left: 60px">
            新密码
            <input type="password" name="" id="newpsd" class="myin" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" maxlength="12"/>
          </div>
          <div style="margin-left: 20px">
            确认新密码
            <input type="password" name="" id="verifypsd" class="myin" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" maxlength="12"/>
          </div>
        </div>

        <div class="button_box">
          <div class="button" @click="closeBox()" style="margin-right: 60px">
            <button class="pop_btn">返回</button>
          </div>
          <div class="button" @click="AmendPsd()">
            <button class="pop_btn">确认修改</button>
          </div>
        </div>
      </div>
      <div class="pop_right">
        <!-- <img src="@/assets/vote/PopPic2.jpg" alt="" /> -->
      </div>
    </div>
  </div>
</template>

<script >
import { encryption, decrypt } from "@/utils";
import api from "@/api";
export default {
  name: "PopAdmin",
  setup() {
    /*点击弹出按钮*/
    function popBox() {
      let popBox = document.getElementById("popBox");
      let popLayer = document.getElementById("popLayer");
      let oldpsd = document.getElementById("oldpsd");
      let newpsd = document.getElementById("newpsd");
      let verifypsd = document.getElementById("verifypsd");
      (verifypsd.value = ""), //清空输入框
        (newpsd.value = ""); //清空输入框
      oldpsd.value = ""; //清空输入框
      popBox.style.display = "block";
      popLayer.style.display = "block";
      //本质上就是 将页面效果设置为可见
    }
    /*点击关闭按钮*/
    function closeBox() {
      let popBox = document.getElementById("popBox");
      let popLayer = document.getElementById("popLayer");
      let oldpsd = document.getElementById("oldpsd");
      let newpsd = document.getElementById("newpsd");
      let verifypsd = document.getElementById("verifypsd");
      (verifypsd.value = ""), //清空输入框
        (newpsd.value = ""); //清空输入框
      oldpsd.value = ""; //清空输入框
      popBox.style.display = "none";
      popLayer.style.display = "none";
      //本质效果就是 将页面效果隐藏
    }
    //发送数据给后端 进行添加管理员
    function AmendPsd() {
      let oldpsd = document.getElementById("oldpsd").value;
      let newpsd = document.getElementById("newpsd").value;
      // var verifypsd = document.getElementById("verifypsd").value;
      let verifypsd = document.getElementById("verifypsd").value;
      console.log(newpsd,verifypsd)
      // var mydata = {
      //   oldpassword: oldpsd,
      //   newpassword: newpsd,
      //   confirmPassword: verifypsd,
      // };
      if (
        oldpsd == "" ||
        newpsd == "" ||
        verifypsd == ""
      ) {
        alert("请填入对应信息，请勿为空！");
      } 
      else if (newpsd != verifypsd) {
        alert("两次密码不相同，请重试！");
      }
       else {
        
      oldpsd = encryption(document.getElementById("oldpsd").value);
      newpsd = encryption(document.getElementById("newpsd").value);//密码加密
      verifypsd = encryption(document.getElementById("verifypsd").value);//密码加密
      var mydata = new FormData();
      mydata.append("oldPassword",oldpsd)
      mydata.append("newPassword", newpsd);
      mydata.append("confirmPassword", verifypsd);
        api
          .amendPsd(mydata)
          .then((res) => {
            if (res.data.status == 200) {
              alert("修改成功");
              window.location.href = "/AdminLogin";
            } else {
              alert(res.data.msg);
            }
          })
          .catch((res) => {
            console.log(res);
            alert("数据问题，请咨询管理员！");
          });
        closeBox();
      }
    }
    return {
      popBox,
      closeBox,
      AmendPsd,
    };
  },
  methods: {
    sing() {
      console.log("我是子组件的方法");
    },
  },
};
</script>

<style scoped>
.box {
  z-index: 1;
}

/*背景层 作为阴影部分 遮挡信息*/
.click_btn {
  background: none;
  border: none;
  /* padding: 18px 38%; */
  /* 悬浮鼠标样式 */
  cursor: pointer;
}
#popLayer {
  /* 设置display 为none 不显示 */
  display: none;
  background-color: #c2c2c2;
  /* position: absolute; */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  -moz-opacity: 0.8;
  opacity: 0.8;
  filter: alpha(opacity=80);
  /* 只支持IE6、7、8、9 */
  cursor: auto;
}
/*弹出层  弹出对应的信息*/
/* 2.设置弹出层和背景层的display属性为none;让他们默认隐藏不显示; */
#popBox {
  /* 设置display 为none  不显示 */
  display: none;
  background-color: #ffffff;
  background-image: "@/assets/vote/beijing.png";
  z-index: 11;
  /* 设置弹出层的显示大小，并且居中显示; */
  width: 760px;
  height: 500px;
  /* position: absolute; */
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  cursor: auto;
  border-radius: 10px;
}

#popBox .close {
  text-align: right;
  margin-right: 5px;
  background-color: #f8f8f8;
}

/*关闭按钮*/
#popBox .close a {
  text-decoration: none;
  color: #2d2c3b;
}
.Pop_up_box {
  width: 760px;
  height: 100%;
  text-align: center;
  /* width: 950px; */
  overflow: hidden;
}
/* .popleft {
  float: left;
  margin-top: 5.5%;
} */
/* .pop_right {
  float: right;
} */
.theme {
  font-family: FZYTK--GBK1-0;
  font-size: 45px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #669bfb;

  margin-bottom: 60px;
  /* margin-left: 100px; */
  
  margin-top: 25px;
}

.box_contents {
  font-family: AdobeHeitiStd-Regular;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #669bfb;
}
.myin {
  border-bottom: 1px solid #669bfb;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  /* 设置outline 轮廓样式 */
  outline: none;
  /* 背景为透明无颜色 是background-color 的默认值 */
  background: transparent;
  /* 设置轮廓的宽度 */
  outline: medium;
  margin-bottom: 48px;
  width: 200px;
  font-size: 23px;
}

.button {
  display: inline-block;
  width: 171px;
  height: 57px;
  border: solid 1px #78aefe;
  /* margin-left: 170px;
  margin-top: 40px; */
  /* 水平居中 */
  text-align: center;
  /* 设置行高 */
  line-height: 62px;
  cursor: pointer;
}
.pop_btn {
  border: none;
  background: none;
  font-family: AdobeHeitiStd-Regular;
  color: #669bfb;
  font-size: 25px;
  font-weight: normal;
  font-stretch: normal;
  /* 设置字间距 */
  letter-spacing: 0px;

  cursor: pointer;
  position: relative;
    bottom: 5px;
}
/* 消除button 的点击样式 */
button:focus {
  outline: none;
}
.button_box {
  margin-left: 30px;
}

.right img {
  height: 500px;
}
</style>